<template>
  <div>
<!--  <div style="float: left">-->
    <div style="box-shadow: 0 0 10px rgba(0,0,0,.1); padding:10px 20px;border-radius: 5px;margin-bottom: 10px">

      <div class="inline-block-div">
        <img src="https://tool.lu/netcard/" alt="IP网络卡片">
      </div>

      <div class="inline-block-div" style="margin-left: 20px;">
        <el-tag>{{timeOfDay()}}</el-tag>
      </div>
    </div>

    <el-calendar v-model="currentTime"></el-calendar>

    <div style="display: flex">
      <el-card style="width: 100%">
        <div slot="header" class="clearfix">
          <span>很多功能还在建设中，有问题联系开发者-林硕：19544511949</span>
        </div>
        <div>
          <div style="margin: 10px 0">
            <strong>选择主题色</strong>
          </div>
          <el-button type="primary">选择此主题</el-button>
          <el-button type="success">选择此主题</el-button>
          <el-button type="warning">选择此主题</el-button>
          <el-button type="danger">选择此主题</el-button>
          <el-button type="info">选择此主题</el-button>
        </div>
      </el-card>
    </div>

    <div style="display: flex; margin: 15px 0">
      <!--  右侧留空    -->
      <el-card style="width: 50%; margin-right: 10px">
        <div style="margin-bottom: 15px; font-size: 20px;font-weight: bold">系统公告</div>
        <el-timeline style="padding: 0">
          <el-timeline-item v-for="item in notices" :key="item.id" :timestamp="item.creatTime" placement="top">
            <el-card>
              <h4>{{item.title}}</h4>
              <p>{{ item.content }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>

      <el-card style="width: 50%">
        <div style="margin-bottom: 15px; font-size: 20px;font-weight: bold">近期文档</div>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item v-for="(item,index) in docs" :key="item.id" :name="index+''" placement="top">
            <template slot="title">
              <h4>《{{item.title}}》 —[{{item.modifierName?item.modifierName:item.authorName}}]</h4>
            </template>
              <div @click="docDetail(item.id,item.content)">简介：{{ item.description}}</div>
          </el-collapse-item>
        </el-collapse>
      </el-card>

    </div>

  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      user: JSON.parse(localStorage.getItem('userInfo') || '{}'),
      notices: [],
      docs: [],
      activeName: '0'
      ,currentTime: new Date()
    }
  },
  created() {
    // this.loadNotice(); //不要刚开始就加载，此时还没有token会被重定向到登录页，本身首页也会重定向，双次重定向报错
  },
  computed: {

  },
  mounted() {
    this.health();
  },
  methods:{
    health(){
      this.$request.put('/web/tokenHealth').then(res => {
        if (res.code === '200'){
          console.log("主页Token鉴权正常")
          this.loadNotice();
          this.loadDoc();
        }else {
          this.$message.error("请先登录")
        }
      })
    },
    loadNotice(){
      this.$request.get('/notice/findUserNotice').then(res => {
        if (res.code === '200'){
          this.notices = res.data
        }else {
          this.$message.error("获取公告数据失败："+res.msg)
        }
      })
    },
    loadDoc(){
      this.$request.get('/doc/findByRecent').then(res => {
        if (res.code === '200'){
          this.docs = res.data
        }else {
          this.$message.error("获取文档数据失败："+res.msg)
        }
      })
    },
    //点击公告详情
    docDetail(docId,content){
      if (content){
        this.$router.push('/docDetail?id='+docId)
      }else {
        this.$message.warning("此文档没有内容")
      }
    },
    //时间
    timeOfDay(){
      // 获取当前小时
      let hours = new Date().getHours();
      // 设置默认文字
      let state = ``;
      // 检查用户是否登录
      if (!this.user || !this.user.name) {
        state = '会话状态异常：请先登录';
        return state;
      }
      // 判断当前时间段
      if (hours >= 0 && hours < 7) {
        state = `哎呀！来的挺早呀，小本本记下来：${this.user.name}是早起标兵！`;
      } else if (hours >= 7 && hours < 8) {
        state = `早上好，${this.user.name}，记得打上班卡啊！`;
      } else if (hours >= 8 && hours < 11) {
        state = `上午好，${this.user.name}，上午精神气好，优先做比较费脑筋的工作哦！`;
      } else if (hours >= 11 && hours < 12) {
        state = `中午好，${this.user.name}，午饭少吃点，小心犯困`;
      } else if (hours >= 12 && hours < 16) {
        state = `下午好，${this.user.name}，如果困了就多喝水，站起来溜达溜达~`;
      } else if (hours >= 16 && hours < 17) {
        state = `准备下班啦，${this.user.name}，日报整理一下，记得打下班卡哦！`;
      } else if (hours >= 17 && hours < 23) {
        state = `加班吗？${this.user.name}，合理工作，注意休息哦~`;
      } else {
        state = `现在这个时间点还在线，你是在加班吗？加油！${this.user.name}`;
      }
      return state;
    }
  }
}
</script>

<style scoped>
.inline-block-div {
  display: inline-block;
  vertical-align: middle; /* 垂直居中 */
}
.inline-block-div img {
  max-width: 100%; /* 确保图片不会超出容器宽度 */
  height: auto; /* 保持图片比例 */
}
</style>